<template>
  <div>
    <city></city>
    <search :List = 'listCity'></search>
    <city-list :List = 'listCity' :Hot = 'hotCity' :letter = 'letter'></city-list>
    <city-alphabet :List = 'listCity' @change="alphabetChange"></city-alphabet>
  </div>
</template>
<script type="text/ecmascript-6">
import axios from 'axios'
import city from '@/pages/city/components/cityHeader'
import search from '@/pages/city/components/citySearch'
import cityList from '@/pages/city/components/List'
import cityAlphabet from '@/pages/city/components/Alphabet'
export default{
  name: 'City',
  components: {
    city,
    search,
    cityList,
    cityAlphabet
  },
  data () {
    return {
      listCity: {},
      hotCity: [],
      letter: ''
    }
  },
  methods: {
    getCity () {
      axios.get('/api/city.json').then((res) => {
        res = res.data
        console.log(res)
        if (res.ret && res.data) {
          this.listCity = res.data.cities
          this.hotCity = res.data.hotCities
        }
      })
    },
    alphabetChange (letter) {
      this.letter = letter
    }
  },
  mounted () {
    this.getCity()
  }
}
</script>
<style lang="stylus" scoped>
</style>
